<!--
// +----------------------------------------------------------------------
// | Created by PHPstorm: JRKAdmin框架 [ JRKAdmin ]
// +----------------------------------------------------------------------
// | Copyright (c) 2019~2022 [LuckyHHY] All rights reserved.
// +----------------------------------------------------------------------
// | SiteUrl: http://www.luckyhhy.cn
// +----------------------------------------------------------------------
// | Author: LuckyHhy <jackhhy520@qq.com>
// +----------------------------------------------------------------------
// | Date: 2020/3/2-14:46
// +----------------------------------------------------------------------
// | Description:
// +----------------------------------------------------------------------
*-->


{extend name='public/base' /}


{block name="content"}

<div class="layui-col-md12">

    <div class="layui-card">
          <div class="layui-card-body layui-row ">

              <blockquote class="layui-elem-quote layui-text">
                  省市县区三级联动下拉选择器使用开源项目：layarea<br>
                  <a href="https://github.com/fesiong/layarea" target="_blank" >layarea</a>
              </blockquote>

          </div>

      </div>

    <div class="layui-card">

        <div class="layui-card-body">

            <!--内容区-->
            <div class="layui-form">

                <div class="layui-form-item" id="area">
                    <div class="layui-form-label">站点地址：</div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <select name="province" class="province-selector" data-value="湖南省" lay-filter="province-1">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <select name="city" class="city-selector" data-value="长沙市" lay-filter="city-1">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <select name="county" class="county-selector" data-value="芙蓉区" lay-filter="county-1">
                            <option value="">请选择区</option>
                        </select>
                    </div>
                </div>


                <pre class="layui-code" lay-title="JavaScript" lay-skin="notepad">//代码区域
   layarea.render({
            elem: '#area',
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });
      </pre>




            </div>


        </div>
    </div>

</div>


{/block}


{block name="js"} <!--js处理区-->



<script>

    layui.use(['element', 'form', 'jquery', 'lucky','layarea','code'], function () {
        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        var lucky=layui.lucky;
        var layarea = layui.layarea;
        var code=layui.code;

        layarea.render({
            elem: '#area',
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });


    });

</script >


{/block}
